'use client'

import React from 'react'
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'

const ColorTest = () => {
  return (
    <div className="p-6 space-y-8">
      {/* 基础颜色测试 */}
      <section>
        <h2 className="text-2xl font-bold mb-4">基础颜色</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-6 bg-background text-foreground border rounded">
            背景色 & 文本色
          </div>
          <div className="p-6 bg-foreground text-background rounded">反转色</div>
        </div>
      </section>

      {/* 按钮组测试 */}
      <section>
        <h2 className="text-2xl font-bold mb-4">按钮颜色</h2>
        <div className="flex flex-wrap gap-4">
          <Button>Primary 按钮</Button>
          <Button variant="secondary">Secondary 按钮</Button>
          <Button variant="destructive">Destructive 按钮</Button>
          <Button variant="ghost">Ghost 按钮</Button>
          <Button variant="outline">Outline 按钮</Button>
        </div>
      </section>

      {/* 卡片测试 */}
      <section>
        <h2 className="text-2xl font-bold mb-4">卡片样式</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Card>
            <CardHeader>
              <CardTitle>默认卡片</CardTitle>
              <CardDescription className="text-muted-foreground">
                使用默认背景色的卡片
              </CardDescription>
            </CardHeader>
            <CardContent>
              <p>这是卡片的主要内容区域，使用默认文本颜色。</p>
            </CardContent>
            <CardFooter>
              <Button>操作按钮</Button>
            </CardFooter>
          </Card>

          <Card className="bg-secondary">
            <CardHeader>
              <CardTitle>次要背景卡片</CardTitle>
              <CardDescription className="text-secondary-foreground">
                使用次要背景色的卡片
              </CardDescription>
            </CardHeader>
            <CardContent className="text-secondary-foreground">
              <p>这是使用次要颜色的内容区域。</p>
            </CardContent>
            <CardFooter>
              <Button variant="outline">操作按钮</Button>
            </CardFooter>
          </Card>
        </div>
      </section>

      {/* 强调色与装饰色测试 */}
      <section>
        <h2 className="text-2xl font-bold mb-4">强调色 & 装饰色</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-6 bg-accent text-accent-foreground rounded">
            强调背景
          </div>
          <div className="p-6 bg-muted text-muted-foreground rounded">柔和背景</div>
        </div>
      </section>

      {/* 图表颜色测试 */}
      <section>
        <h2 className="text-2xl font-bold mb-4">图表颜色</h2>
        <div className="grid grid-cols-5 gap-2">
          {[1, 2, 3, 4, 5].map((i) => (
            <div
              key={i}
              className={`p-4 bg-chart-${i} text-white rounded text-center`}
            >
              图表色 {i}
            </div>
          ))}
        </div>
      </section>

      {/* 边框和输入框测试 */}
      <section>
        <h2 className="text-2xl font-bold mb-4">边框 & 输入框</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 border border-border rounded">默认边框</div>
          <div className="p-4 border-2 border-ring rounded">
            环形边框（用于focus状态）
          </div>
          <input
            type="text"
            className="p-2 border rounded w-full"
            placeholder="输入框边框颜色"
          />
        </div>
      </section>

      {/* 深色模式切换按钮 */}
      <section className="fixed bottom-4 right-4">
        <Button
          onClick={() => {
            document.documentElement.classList.toggle('dark')
          }}
          variant="outline"
        >
          切换深色模式
        </Button>
      </section>
    </div>
  )
}

export default ColorTest
